Vue中获取input输入框的内容可以通过v-model指令来实现。v-model指令可以实现双向绑定，即在input输入框中输入内容时，Vue会自动将内容存储在指定的data属性中；同时，当Vue中的data属性发生改变时，input输入框的内容也会自动更新。
下面我们来详细讲解一下如何使用v-model来获取input输入框的内容。
1. 在Vue实例的data选项中声明一个属性来存储input输入框的内容。例如，可以在Vue实例的data中添加一个属性名为inputValue：
```javascript
data: {
inputValue: ''
}
```
2. 在input输入框中添加v-model指令，并将它的值绑定到data中声明的属性。例如，可以将input输入框的value属性绑定到inputValue：
```html
```
3. 现在，当input输入框中的内容发生改变时，Vue会自动将新的内容存储在inputValue属性中。
```html
{{inputValue}}
```
在上面的示例中，当在input输入框中输入内容时，即可在下方的p标签中看到输入框中的内容。
除了在input输入框中使用v-model指令，还可以通过`this.$refs`来获取输入框的内容。
在Vue实例中的methods选项中，可以定义一个方法来获取输入框的内容。例如：
```javascript
methods: {
getInputValue() {
const inputValue = this.$refs.myInput.value;
console.log(inputValue);
}
}
```
然后在input输入框中使用ref属性给输入框命名，例如：
```html
```
在点击"获取输入框的内容"按钮时，调用getInputValue方法即可获取到输入框的内容，并将其打印到控制台上。
综上所述，Vue获取input输入框的内容有两种方法：一种是通过v-model指令实现双向绑定，另一种是通过`this.$refs`来获取输入框的内容。根据实际的需求选择合适的方法。
咨询微信客服
0516-6662 4183
立即获取方案或咨询
top
